Global Header

Global Header

The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party).

Base

Preview

No content has been added for this component.

No content has been added for this component.

<header class="slds-global-header_container">
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Navigation</a>
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Main Content</a>
  <div class="slds-global-header slds-grid slds-grid_align-spread">
    <div class="slds-global-header__item">
      <div class="slds-global-header__logo">
        <img src="/assets/images/logo-noname.svg" alt="" />
      </div>
    </div>
    <div class="slds-global-header__item slds-global-header__item_search">
      <div aria-expanded="false" aria-haspopup="listbox" class="slds-form-element slds-lookup" role="combobox">
        <label class="slds-assistive-text" for="global-search-01">Search Salesforce</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left-right">
          <svg class="slds-input__icon slds-input__icon_left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
          </svg>
          <input type="text" aria-activedescendant="" aria-autocomplete="list" aria-controls="global-search-list-01" autocomplete="off" class="slds-input slds-lookup__search-input" id="global-search-01" placeholder="Search Salesforce" role="textbox" />
        </div>
        <div class="slds-lookup__menu" role="listbox" id="global-search-list-01">
          <ul class="slds-lookup__list" role="group" aria-label="Recent Items">
            <li role="presentation">
              <h3 role="presentation" class="slds-lookup__item_label slds-text-body_small">Recent Items</h3>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-01" role="option">
                <svg class="slds-icon slds-icon-standard-opportunity slds-icon_small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
                </svg>
                <span class="slds-media__body">
                  <span class="slds-lookup__result-text">Salesforce - 1,000 Licenses</span>
                  <span class="slds-lookup__result-meta slds-text-body_small">Opportunity • Prospecting</span>
                </span>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-02" role="option">
                <svg class="slds-icon slds-icon-standard-contact slds-icon_small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
                </svg>
                <span class="slds-media__body">
                  <span class="slds-lookup__result-text">Art Vandelay</span>
                  <span class="slds-lookup__result-meta slds-text-body_small">Contact • avandelay@vandelay.com</span>
                </span>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-03" role="option">
                <svg class="slds-icon slds-icon-standard-account slds-icon_small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <span class="slds-media__body">
                  <span class="slds-lookup__result-text">Vandelary Industries</span>
                  <span class="slds-lookup__result-meta slds-text-body_small">Account • San Francisco</span>
                </span>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-04" role="option">
                <svg class="slds-icon slds-icon-custom-8 slds-icon_small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/custom-sprite/svg/symbols.svg#custom8"></use>
                </svg>
                <span class="slds-media__body">
                  <span class="slds-lookup__result-text">Salesforce UK 2016 Events</span>
                  <span class="slds-lookup__result-meta slds-text-body_small">General Ledger • $20,000</span>
                </span>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-05" role="option">
                <svg class="slds-icon slds-icon-standard-lead slds-icon_small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
                </svg>
                <span class="slds-media__body">
                  <span class="slds-lookup__result-text">H.E. Pennypacker</span>
                  <span class="slds-lookup__result-meta slds-text-body_small">Lead • Nursing</span>
                </span>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul class="slds-global-header__item slds-grid slds-grid_vertical-align-center">
      <li class="slds-grid">
        <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-header__button_icon-favorites" aria-pressed="false" title="Toggle Favorites">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>
          </svg>
          <span class="slds-assistive-text">Toggle Favorite</span>
        </button>
        <span class="slds-dropdown-trigger slds-dropdown-trigger_click">
          <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-header__button_icon slds-m-left_none" title="View Favorites">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">View Favorites</span>
          </button>
        </span>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger_click slds-p-horizontal_xxx-small">
        <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-button_icon-container slds-button_icon-x-small slds-global-header__button_icon-actions slds-m-horizontal_xx-small" title="Global Actions">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>
          <span class="slds-assistive-text">Global Actions</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger_click">
        <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-header__button_icon" title="Help and Training">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#question"></use>
          </svg>
          <span class="slds-assistive-text">Help and Training</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger_click">
        <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-header__button_icon" title="Setup">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#setup"></use>
          </svg>
          <span class="slds-assistive-text">Setup</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger_click">
        <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-header__button_icon" title="Notifications">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#notification"></use>
          </svg>
          <span class="slds-assistive-text">Notifications</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger_click slds-m-left_x-small">
        <button class="slds-button" title="person name" aria-haspopup="true">
          <span class="slds-avatar slds-avatar_circle slds-avatar_medium">
            <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />
          </span>
        </button>
      </li>
    </ul>
  </div>
</header>

About Base

Container that fixes the global header to the top of the viewport, contains global header element


Overview of CSS Classes

Selector.slds-global-header_container
Summary

Container that fixes the global header to the top of the viewport, contains global header element

Restrictheader
VariantTrue
Selector.slds-global-header
Summary
Restrict.slds-global-header_container div
Selector.slds-global-header__item
Summary

A region within the global header

Restrict.slds-global-header div, .slds-global-header ul
Selector.slds-global-header__logo
Summary

Container of the global header logo

Restrict.slds-global-header__item div
Selector.slds-global-header__button_icon
Summary

Button icons on the global header

Restrict.slds-global-header__item button
Selector.slds-global-header__button_icon-actions
Summary

Button icon specifically for global actions

Restrict.slds-global-header__item button
Selector.slds-global-header__button_icon-favorites
Summary

Button icon specifically for global actions

Restrict.slds-global-header__item button
Selector.slds-is-selected
Summary

Selected state for favorites button

Restrict.slds-global-header__button_icon-favorites
ModifierTrue
Selector.slds-is-disabled
Summary

Disabled state for favorites button

Restrict.slds-global-header__button_icon-favorites
ModifierTrue
Selector.global-header__icon
Summary

Deal with sizing for global header icons

Restrict.slds-global-header__item svg
Selector.slds-global-header__item_search
Summary

Region that contains the search input, handles sizing

Restrict.slds-global-header__item:nth-child(2)
Selector.slds-global-header__notification
Summary

Handles styling for notification item interactions

Restrict.slds-global-header_container li
VariantTrue